<template>
  <router-layout>
    <div class="detail">
      <!-- 主题 -->
      <div class="padding">
        <p class="dis">{{ datainfo.title }}</p>
        <p class="time">{{ datainfo.create_time | formate_date }}</p>
      </div>
      <!-- 详情展示 -->
      <div v-if="datainfo.study_content" class="introduce ude-box" v-html="datainfo.study_content"></div>
      <div v-if="datainfo.video_url" class="video-box">
        <video :src="datainfo.video_url" :poster="videoImg" width="100%" controls></video>
      </div>
      <div v-if="datainfo.file_url">
        <div class="file-box" v-for="(item, index) in fileList" :key="index">
          <van-icon class="description" name="description"/>
          <a :href="urlHead+'/'+ item.response.data.file_path" :download="item.name">{{item.name}}</a>
        </div>
      </div>
    </div>
  </router-layout>
</template>
<script>
import { news_findById } from "@/api/news";
import moment from "moment";
import other from "@/utils/other";

export default {
  name: "StudyDetail",
  data() {
    return {
      videoImg: "",
      datainfo: {},
      fileList: [],
      urlHead: localStorage.getItem("oss_public_url")
    };
  },
  filters: {
    formate_date(v) {
      return moment(v).format("YYYY-MM-DD");
    }
  },
  methods: {
    // 获取数据
    async initList() {
      let queryId = this.$route.query.id;
      let { data } = await news_findById({ id: queryId });
      if (data.status == 100) {
        this.datainfo = data.data;
        if (data.data.file_url) {
          this.fileList = JSON.parse(data.data.file_url);
        }
        if (data.data.video_url) {
          this.datainfo.video_url =
            this.urlHead +
            "/" +
            JSON.parse(data.data.video_url)[0].response.data.file_path;
          this.videoImg =
            this.datainfo.video_url +
            "?x-oss-process=video/snapshot,t_1000,f_jpg";
        }
        // https://saic-public-2.oss-cn-shanghai.aliyuncs.com/1555768164745.111.mp4
        // https://saic-public-2.oss-cn-shanghai.aliyuncs.com/1555813352304.mp4
      }
    }
  },
  created() {
    this.initList();
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.detail {
  padding: 15px;
  .dis {
    font-size: 18px;
  }
  .time {
    font-size: 14px;
    padding: 10px 0;
    color: #ccc;
  }
  .introduce{}
  .video-box {
    width: 100%;
    padding: 10px 0;
  }
  .file-box {
    display: flex;
    align-items: center;
    padding-bottom: 10px;
    font-size: 14px;
    .description {
      padding-right: 6px;
    }
  }
}
</style>

